<template>
    <div class="quality-task-table-container">
      <!-- 搜索和重置 -->
      <!-- <div class="search-header">
        <el-input
          v-model="searchQuery"
          placeholder="请输入内容"
          class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div> -->
  
      <el-table
        :data="tableData"
        style="width: 100%"
        class="dark-table"
        :header-cell-style="{
          backgroundColor: 'rgb(15, 53, 115)',
          color: '#91caf6',
        }"
        :cell-style="{
          backgroundColor: 'rgb(10, 43, 94)',
          color: '#91caf6',
        }"
        :row-style="{ height: '25px' }"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column
          v-for="item in arr || []"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        />
        <!-- QueryConfig -->
        <!-- <el-table-column prop="tableName" label="名称" />
        <el-table-column prop="district" label="所属区县" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="deviceCategory" label="设备类别" />
        <el-table-column prop="deviceStatus" label="设备状态" /> -->
      </el-table>
  
      <div class="pagination-container">
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="arr.length"
                  @current-change="handleCurrentChange" background class="dark-pagination" />
          </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted,onUpdated } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import request from "@/request/index";
  
  const props = defineProps({
    QueryConfig: {
      type: Object,
      default: () => ({
        url: "/api/zjjscApi/datasource/getSjkslMx",
        method: "get",
        params: {},
        data: {},
        columns: [
          {
            prop: "serialNumber",
            label: "序号",
            width: "80",
          },
          {
            prop: "databaseName",
            label: "名称",
            width: "80",
          },
          {
            prop: "type",
            label: "数据库",
            width: "80",
          },
        ],
      }),
      required: true,
    },
    fathUrl: {
      type: String,
      default: "",
    },
    arr: {
      type: Array,
      default: () => [],
    },
  });
  
  // 搜索关键词
  const searchQuery = ref("");
  // 当前页码
  const currentPage = ref(1);
  // 每页显示条数
  const pageSize = ref(5);
  const pagetotal = ref(0);
  
  // 表格数据源
  const tableData = ref([
    {
      serialNumber: "1",
      name: "设备A",
      district: "区县A",
      deviceName: "设备名称A",
      deviceCategory: "类别A",
      deviceStatus: "正常",
    },
    {
      serialNumber: "2",
      name: "设备B",
      district: "区县B",
      deviceName: "设备名称B",
      deviceCategory: "类别B",
      deviceStatus: "异常",
    },
    {
      serialNumber: "3",
      name: "设备C",
      district: "区县C",
      deviceName: "设备名称C",
      deviceCategory: "类别C",
      deviceStatus: "正常",
    },
  ]);
  
  const filteredData = computed(() => {
    return tableData.value.filter((item) => {
      return Object.values(item).some((val) =>
        String(val).toLowerCase().includes(searchQuery.value.toLowerCase())
      );
    });
  });
  
  // const currentPageData = computed(() => {
  //   const startIndex = (currentPage.value - 1) * pageSize.value;
  //   const endIndex = startIndex + pageSize.value;
  //   return filteredData.value.slice(startIndex, endIndex);
  // });
  
  const handleSearch = () => {
    currentPage.value = 1;
    QueryTAbsInit();
  };
  
  const handleReset = () => {
    searchQuery.value = "";
    currentPage.value = 1;
    QueryTAbsInit();
  };
  
  const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
    QueryTAbsInit();
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    QueryTAbsInit();
  };
  const QueryTAbsInit = () => {
    tableData.value = []; // 清空表格数据
    request({
      url: props.QueryConfig.url,
      method: "get",
      params: {
        pageNumber: currentPage.value,
        pageSize: 10,
      },
    }).then((res) => {
      console.log(res, "查询数据");
      
      tableData.value = res.data.data?res.data.data:res.data;
      pagetotal.value = res.data.data.length?res.data.data.length:res.data.length;
    });
  };
  onMounted(() => {
    props.QueryConfig.url = props.fathUrl;
    console.log(props.QueryConfig, "处理事件1111>>>>>>>>>>>>>>>>>",props.fathUrl);
    QueryTAbsInit();
  });
  </script>
  
  
  <style scoped>
      .quality-task-table-container {
          background-color: rgb(15, 53, 115);
          color: #91caf6;
          overflow-y: auto;
          height: 100%;
          padding: 10px;
      }
  
      .search-header {
          margin-bottom: 20px;
          display: flex;
          gap: 10px;
      }
  
      .search-input {
          width: 200px;
      }
  
      .pagination-container {
          margin-top: 20px;
          display: flex;
          justify-content: flex-end;
      }
  
      :deep(.dark-table) {
          height: 80%;
          background: rgb(10, 43, 94);
          --el-table-border-color: rgb(10, 43, 94);
          --el-table-border: 1px solid var(--el-table-border-color);
          --el-table-text-color: #91caf6;
          --el-table-header-text-color: #91caf6;
          --el-table-row-hover-bg-color: rgb(14, 51, 112);
      }
  
      :deep(.dark-pagination) {
          --el-pagination-bg-color: transparent;
          --el-pagination-text-color: #91caf6;
          --el-pagination-border-color: rgb(10, 43, 94);
          --el-pagination-hover-color: #409eff;
          --el-pagination-button-bg-color: transparent;
      }
  
      :deep(.el-button) {
          --el-button-bg-color: transparent;
          --el-button-border-color: #91caf6;
          --el-button-hover-bg-color: rgba(145, 202, 246, 0.1);
          --el-button-hover-border-color: #91caf6;
          --el-button-active-bg-color: rgba(145, 202, 246, 0.2);
          --el-button-text-color: #91caf6;
      }
  
      :deep(.el-button--primary) {
          --el-button-bg-color: rgba(64, 158, 255, 0.1);
          --el-button-border-color: #409eff;
          --el-button-hover-bg-color: rgba(64, 158, 255, 0.2);
          --el-button-hover-border-color: #409eff;
          --el-button-active-bg-color: rgba(64, 158, 255, 0.3);
          --el-button-text-color: #409eff;
      }
  
      :deep(.el-input) {
          --el-input-bg-color: transparent;
          --el-input-border-color: #91caf6;
          --el-input-text-color: #91caf6;
          --el-input-placeholder-color: rgba(145, 202, 246, 0.5);
      }
  
      /* 修改未点击时的数字方块背景颜色 */
      /* :deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
      background-color: #75fbff !important;
    } */
      /* 未点击时的数字方块背景颜色 */
      :deep .el-pagination .el-pager li:not(.active):not(.disabled) {
          background-color: #0e3a90 !important;
          color: #75fbff;
      }
  
      :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
          background-color: #75fbff !important;
          color: #01133c;
      }
  </style>
  
